import type { EChartsOption } from 'echarts'

import type { PositionType } from '../types'

import type { UnwrapArray } from '@/types'
import { colors } from '../config'
import { getLegendPos } from '../utils'

interface HookOptions {
  radius?: [string, string]
  legendPosition?: PositionType
  dataSource: {
    title?: string
    data: { name: string, value: number }[]
  }
  centerTitle?: string
  centerValue?: string | number
  showCenter?: boolean
  colors?: string[]
  valueFormatter?: (value: any) => string
}

export default function usePieCharts(options: HookOptions) {
  options.radius = options.radius || ['48%', '70%']
  options.legendPosition = options.legendPosition || 'tl'

  function getCenterElements() {
    if (!options.showCenter) {
      return []
    }
    return [
      {
        type: 'text',
        left: 'center',
        top: '51%',
        style: {
          text: options.centerTitle,
          fill: '#a6adb8',
          fontSize: 12,
        },
      },
      {
        type: 'text',
        left: 'center',
        top: '57%',
        style: {
          fontFamily: 'BebasNeue',
          text: options.valueFormatter
            ? options.valueFormatter(options.centerValue)
            : options.centerValue,
          fill: '#393C40',
          fontSize: 24,
        },
      },
    ]
  }
  const themes = options.colors?.length ? options.colors : colors

  // 通过索引获取预设主题，获取不到则使用第一个
  function getTheme(index: number) {
    const _index = index % themes.length
    return themes[_index]
  }

  // 生成图例数据
  function generateLegendData(): NonNullable<
    UnwrapArray<EChartsOption['legend']>
  >['data'] {
    return options.dataSource.data?.map((item, index) => {
      const color = getTheme(index)
      return {
        name: item.name,
        textStyle: {
          color,
        },
      }
    })
  }

  const chartsOptions = computed(() => {
    return {
      grid: {
        left: 0,
        right: 0,
        bottom: 0,
        top: 0,
      },
      legend: {
        ...getLegendPos(options.legendPosition!),
        data: generateLegendData(),
        itemGap: 16,
        itemWidth: 12,
        itemHeight: 8,
      },
      graphic: {
        elements: getCenterElements(),
      },
      tooltip: {
        borderColor: '#fff',
        formatter(params: any) {
          return `
            <div class="pie-tooltip">
              ${
                options.dataSource.title
                  ? `<div class="title">${options.dataSource.title}</div>`
                  : ''
              }
              <div class="wrap">
                <div style="background-color: ${params.color}"></div>
                <div class="name">${params.data.name}</div>
                <div class="value">
                  ${
                    options.valueFormatter
                      ? options.valueFormatter(params.data.value)
                      : params.data.value
                  }
                </div>
              </div>
            </div>
          `
        },
      },
      series: [
        {
          type: 'pie',
          radius: options.radius,
          center: ['50%', '58%'],
          color: options.colors?.length ? options.colors : colors,
          label: {
            show: false,
          },
          data: options.dataSource.data,
        },
      ],
    } as EChartsOption
  })

  return {
    options: chartsOptions,
  }
}
